/* 通用选择器：*（通常不建议使用） */
/* * {
    margin: 0;
    padding: 0;
} */

/* 类型选择器 */
/* ID选择器 */
#main {
    color: blue;
}

/* 类选择器 */
.news_title {
    color: brown;
}

/* 元素选择器 */
h3 {
    color:coral;
}

/* 属性选择器 */
[title] {
    font-size: 1.5em;
}

p[data-bind] {
    color: blue;
}

p[title="abc"] {
    color: chocolate;
}

p[title~="de"] {
    color: orange;
}

p[title|="xyz"] {
    color: fuchsia;
}

a[href][title] {
    color: cadetblue;
    font-size: .75em;
}

/* 伪类与伪元素选择器 */
p:hover {
    background-color: #abc;
}

li:hover {
    background-color: #fbc;
}

a {
    color: red;
}

a:link {
    color: red;
}

a:visited {
    color: purple;
}

a:hover {
    font-weight: bold;
}

a:active {
    color:chartreuse;
}

input:focus {
    background-color: #abc;
}

pre:first-child {
    color: red;
}

li:first-child {
    color: red;
}

div p:first-line {
    color: red;
}

div p:first-letter {
    font-weight: bold;
    font-size: 200%;
}

div h1:before {
    content: "before:";
}

div h1:after {
    content: "after:";
}

/* 组合选择器 */
div span {
    color: blueviolet;
}

p > span {
    color:hotpink;
}

pre + span {
    color: crimson;
}

pre ~ span.bro {
    color: forestgreen;
}